<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span {
            display: inline-block;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: red;
            line-height: 100px;
            text-align: center;
            font-size: 50px;
            color: #fff
        }
        
        span.blue {
            background-color: blue;
        }
        
        button {
            width: 100px;
            height: 30px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <span class="">1</span>
    <span class="">2</span>
    <span class="">3</span>
    <span class="">4</span>
    <span class="">5</span>
    <span class="blue">6</span>
    <span class="blue">7</span>
    <button id="startBtn">开始</button>
    <button id="stopBtn">停止</button>


    <script>
        //1-35   5 不重复
        let red = document.querySelectorAll("span:not(.blue)");
        let blue = document.querySelectorAll("span.blue");
        let timer;
        startBtn.onclick = function() {
            if (timer) {
                clearInterval(timer)
            }
            timer = setInterval(function() {
                setInnerHTML(red)
                setInnerHTML(blue)
            }, 100)
        }

        function setInnerHTML(ele) {
            let arr = []
            for (let i = 0; i < ele.length; i++) {
                let cont = ele[i].className == "blue" ? 12 : 35;
                let num = Math.floor(Math.random() * (cont - 1 + 1) + 1)
                if (arr.indexOf(num) > -1) {
                    i--;
                }
                arr.push(num)
            }
            let newArr = arr.filter(function(item, index, obj) {
                return obj.indexOf(item) === index
            })
            newArr.sort(function(a, b) {
                return a - b
            })

            ele.forEach(function(item, index) {
                item.innerHTML = newArr[index]
            })
        }

        stopBtn.onclick = function() {
            clearInterval(timer)
        }


























        // let arr = [];

        // function fn() {
        //     for (var i = 0; arr.length < 5; i++) {
        //         let num = parseInt(Math.random() * (35 - 1 + 1) + 1);
        //         if (!arr.includes(num)) {
        //             arr.push(num)
        //         }
        //     }
        //     console.log(arr)
        // }

        // fn()
    </script>

</body>

</html>